<template>
  <el-dialog
    title="管理常用应用"
    :visible.sync="dialogVisible"
    width="720px"
    append-to-body
    :before-close="closeDialog">
    <div class="container">
      <div class="left">
        <div class="title-row">
          <div class="title">常用应用</div>
          <div class="subtitle">已添加 <span>{{ dragList.length + 2 }}</span> 个</div>
        </div>
        <div class="left-box">
          <div
            class="left-item"
            v-for="(item,index) in frequentlyUsedAppList.slice(0,2)"
            :key="item.text"
          >
            <div class="dragiconfix"></div>
            <div class="text">
              <div class="text-info">
                <img class="icon-img" :src="item.img" alt="" />
                <span>{{ item.text }}</span>
              </div>
            </div>
          </div>
          <draggable
            v-model="dragList"
            chosen-class="chosen"
            force-fallback="true"
            group="text"
            animation="1000"
            @start="onStart"
            @end="onEnd"
            @choose="onChoose"
            handle=".dragicon"
          >
            <transition-group>
              <div
                class="left-item"
                v-for="(item,index) in dragList"
                :key="item.text"
              >
                <div class="dragicon" :class="{drag:item.drag}"></div>
                <div class="text">
                  <div class="text-info">
                    <img class="icon-img" :src="item.img" alt="" />
                    <span>{{ item.text }}</span>
                  </div>
                  <div class="remove-btn" @click="removeApp(item)">
                    <img src="~@/assets/dashboard/del2.png" alt="" width="16px" height="16px" />
                    <span>移除常用</span>
                  </div>
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>
      </div>
      <div class="right">
        <div class="title-row">
          <div class="title">全部应用</div>
        </div>
        <div class="right-box">
          <div class="search-box">
            <el-input v-model="searchAppText" placeholder="请输入应用名称" prefix-icon="el-icon-search"></el-input>
          </div>
          <div class="right-content">
            <div class="type-list-check">
              <div
                @click="chooseType(item)"
                class="type-item"
                :class="{ active: item.active }"
                v-for="(item,index) in partitionList"
                :key="item.text"
              >{{ item.text }}</div>
            </div>
            <div class="app-list-check">
              <template v-if="filterPartitionList.length">
                <div
                  class="app-item"
                  v-for="(item,index) in filterPartitionList"
                  :key="item.text"
                >
                  <div class="app-info">
                    <img :src="item.img" alt="" width="32" height="32">
                    <span>{{ item.text }}</span>
                  </div>
                  <div class="add-btn" @click="addApp(item)" v-if="!checkUsedApp(item)">
                    <img src="~@/assets/dashboard/add.png" alt="" width="16px" height="16px" />
                    <span>添加常用</span>
                  </div>
                  <div class="added-btn" v-else>
                    <span>已添加</span>
                  </div>
                </div>
              </template>
              <template v-else>
                <img src="~@/assets/dashboard/empty-app.png" alt="" width="90px" height="90px" class="empty-app">
                <div class="empty-app-text">未检索到相关应用</div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">保存</el-button>
    </div>
<!--    移除常用应用提示弹窗-->
    <el-dialog
      title="提示"
      :visible.sync="removeVisible"
      width="400px"
      append-to-body
      :before-close="closeRemove">
      <span>确定要将该应用移除常用应用？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="removeVisible = false">取消</el-button>
        <el-button type="danger" @click="handleRemove(removingAppItem)" class="rbtn">移除</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>
<script>
import draggable from 'vuedraggable'
import { allAppList } from "@/components/workApp/components/appList";
export default {
  components: {
    draggable
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    frequentlyUsedAppList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      dragList: [],
      removeVisible: false,
      removingAppItem: null,
      searchAppText: '',
      partitionList: [
        {
          text: '办公支持',
          active: true,
          apps: [],
        },
        {
          text: '资产管理',
          active: false,
          apps: [],
        },
        {
          text: '文件工具',
          active: false,
          apps: [],
        },
        {
          text: '远程协同',
          active: false,
          apps: [],
        },
        {
          text: '个人相关',
          active: false,
          apps: [],
        },
        {
          text: '通知待办',
          active: false,
          apps: [],
        },
      ],
    }
  },
  computed: {
    partitionChoseIndex(){
      return this.partitionList.findIndex((pitem,pindex)=>{
        return pitem.active
      })
    },
    filterPartitionList(){
      if(!this.partitionList[this.partitionChoseIndex]){
        return []
      }
      return this.partitionList[this.partitionChoseIndex].apps.filter((item)=>{
        return item.text.indexOf(this.searchAppText)!==-1
      })
    },
  },
  mounted() {
    this.partitionList = this.$store.state.dashboard.partitionList.map((item,index)=>{
      item.active = index===0
      return item
    })
  },
  methods: {
    //关闭弹窗
    closeDialog() {
      this.$emit('close')
    },
    //确定
    save(){
      this.$emit('save',[
        this.frequentlyUsedAppList[0],
        this.frequentlyUsedAppList[1],
        ...(this.$utilJs.deepClone(this.dragList).map((item)=>{
          delete item.drag
          return item
        }))
      ])
    },
    //移除常用
    removeApp(item){
      this.removingAppItem = item
      this.removeVisible = true
    },
    //检查是否常用
    checkUsedApp(aitem) {
      return this.dragList.some((item,index)=>{
        return item.text === aitem.text
      }) || aitem.text === '广播通知' || aitem.text === '我的待办'
    },
    //添加常用
    addApp(item){
      this.dragList.push({
        ...item,
        active: false,
        drag: false
      })
      this.$showMsg('添加成功！', 'success')
    },
    handleRemove(item){
      let dIndex = this.dragList.findIndex((dItem,index)=>{
        return dItem.text === item.text
      })
      this.dragList.splice(dIndex,1)
      this.removeVisible = false
      this.removingAppItem = null
      this.$showMsg('移除成功！', 'success')
    },
    closeRemove(){
      this.removeVisible = false
    },
    onStart(e) {
      this.dragList[e.oldIndex].drag = true
    },
    onEnd(e) {
      this.dragList[e.newIndex].drag = false
    },
    onChoose(e) {
      this.dragList[e.oldIndex].drag = true
    },
    //右侧选择应用分类
    chooseType(item) {
      this.partitionList.forEach((pitem,pindex)=>{
        if(item.text === pitem.text){
          pitem.active = true
        }
        else{
          pitem.active = false
        }
      })
    },
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(val){
        if(val){
          this.searchAppText = ''
          this.dragList = this.frequentlyUsedAppList.length>2 ? this.frequentlyUsedAppList.slice(2).map((item)=>{
            return { ...item, drag: false }
          }) : []
        }
      }
    }
  },
};
</script>
<style scoped lang="less">
@textColor: #1f1e1d;
@ntalkColor: #e67529;
* {
  font-family: MiSans;
}
@font-face {
  font-family: MiSans;
  src: url('~@/assets/dashboard/font/MiSans-Medium.ttf');
}
/deep/ .el-dialog__footer {
  text-align: center;
}
/deep/ .el-dialog__body {
  padding: 24px;
}
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 290px;
    .title-row {
      width: 100%;
      height: 22px;
      display: flex;
      .title {
        font-size: 14px;
        color: rgba(0,0,0,0.66);
        line-height: 22px;
      }
      .subtitle {
        font-size: 12px;
        color: rgba(0,0,0,0.44);
        line-height: 22px;
        margin-left: 16px;
        span {
          color: #e67529;
        }
      }
    }
    .left-box {
      box-sizing: border-box;
      width: 100%;
      height: 336px;
      overflow: auto;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 6px;
      margin-top: 8px;
      padding-left: 8px;
      .left-item {
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        .dragicon {
          width: 16px;
          height: 16px;
          background-image: url('~@/assets/dashboard/drag.png');
          background-size: 100% 100%;
          cursor: move;
          &.drag {
            background-image: url('~@/assets/dashboard/dragging.png');
          }
        }
        .dragiconfix {
          width: 16px;
          height: 16px;
        }
        .text {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 12px;
          height: 48px;
          line-height: 48px;
          box-sizing: border-box;
          font-size: 14px;
          color: @textColor;
          border-bottom: 1px solid rgba(0,0,0,0.06);
          width: calc(100% - 28px);
          .text-info {
            display: flex;
            align-items: center;
            .icon-img {
              width: 32px;
              height: 32px;
              margin-right: 12px;
            }
          }
          .remove-btn {
            margin-right: 8px;
            display: flex;
            align-items: center;
            color: @ntalkColor;
            cursor: pointer;
            width: 96px;
            height: 24px;
            font-size: 14px;
            border-radius: 4px;
            &:hover {
              background-color: #fff0e5;
            }
            img {
              margin-right: 8px;
            }
          }
        }
        &:last-child .text {
          border-bottom: none;
        }
      }
    }
  }
  .right {
    width: calc(100% - 306px);
    .title-row {
      width: 100%;
      height: 22px;
      display: flex;
      .title {
        font-size: 14px;
        color: rgba(0,0,0,0.66);
        line-height: 22px;
      }
    }
    .right-box {
      box-sizing: border-box;
      width: 100%;
      height: 336px;
      overflow: auto;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 6px;
      margin-top: 8px;
      .search-box {
        width: 100%;
        height: 48px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        /deep/ .el-input__inner {
          height: 32px;
          line-height: 32px;
          &:focus {
            border-color: #DCDFE6;
          }
          .el-input__prefix {
            top: -4px;
          }
        }
      }
      .right-content {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        .type-list-check {
          width: 104px;
          box-sizing: border-box;
          border-right: 1px solid rgba(0, 0, 0, 0.15);
          background-color: #fafafa;
          padding-top: 8px;
          .type-item {
            width: 100%;
            box-sizing: border-box;
            height: 34px;
            line-height: 34px;
            padding-left: 12px;
            color: rgba(0,0,0,0.66);
            font-size: 14px;
            cursor: pointer;
            &.active {
              color: @ntalkColor;
              border-right: 2px solid @ntalkColor;
            }
          }
        }
        .app-list-check {
          width: calc(100% - 104px);
          height: 100%;
          overflow-y: auto;
          box-sizing: border-box;
          padding-left: 12px;
          display: flex;
          align-items: center;
          flex-direction: column;
          .empty-app {
            width: 90px;
            height: 90px;
            margin: 80px 0 16px;
          }
          .empty-app-text {
            line-height: 22px;
            font-size: 14px;
            color: rgba(0,0,0,0.66);
          }
          .app-item {
            width: 100%;
            height: 48px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0,0,0,0.15);
            &:last-child {
              border-bottom: none;
            }
            .app-info {
              display: flex;
              align-items: center;
              img {
                width: 32px;
                height: 32px;
                border-radius: 8px;
              }
              span {
                color: @textColor;
                margin-left: 12px;
                font-size: 14px;
              }
            }
            .add-btn {
              margin-right: 8px;
              display: flex;
              align-items: center;
              color: @ntalkColor;
              cursor: pointer;
              width: 96px;
              height: 24px;
              font-size: 14px;
              img {
                margin-right: 8px;
              }
              border-radius: 4px;
              &:hover {
                background-color: #fff0e5;
              }
            }
            .added-btn {
              margin-right: 8px;
              display: flex;
              align-items: center;
              color: rgba(0,0,0,0.22);
              width: 58px;
              height: 24px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
.chosen {
  border-radius: 6px;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
  .text {
    border-bottom: none;
  }
}
.rbtn {
  background-color: #ff4040 !important;
  border-color: #ff4040 !important;
}
</style>
